<!-- 评论详情页 -->
<template>
	<view class="comment-detail-box">
		<!-- 案例详细数据 -->
		<release-item :isFromComment="true" :itemObj="caseData" @starClick="starClick" @deleteClick="deleteShow = true"></release-item>

		<!-- 该案例已有评论数据 -->
		<view class="comment-container-box">
			<view class="comment-title-box"><u-section title="评论" :right="false" fontSize="30"></u-section></view>
			<!-- 评论数据项 -->
			<block v-for="commentItem in commentDataList" :key="commentItem.id">
				<view class="comment-item-box">
					<view class="user-data">
						<view class="user-name-box">
							<u-avatar :src="commentItem.userInfo.avatar" size="60"></u-avatar>
							<text class="name">{{ commentItem.userInfo.nick_name || '' }}</text>
						</view>
						<view class="time-box">{{ commentItem.create_time }}</view>
					</view>
					<view class="comment-content">{{ commentItem.content || '' }}</view>
				</view>
			</block>
		</view>

		<!-- 底部的评论输入框和发送按钮区域 -->
		<view class="commont-input-box">
			<view class="comment-input">
				<u-input
					v-model="inputValue"
					placeholder="说说你的看法"
					type="text"
					confirm-type="发送"
					cursor-spacing="5"
					:clearable="false"
					:clearabled="false"
					shape="round"
					bg-color="#F4F4F4"
					maxlength="9999"
				/>
				<view class="submit-btn" @click="submitClick">发送</view>
			</view>
		</view>
		
		<delete-model :show="deleteShow" tip="确认删除帖子吗？" cancelText="取消删除" confirmText="确认删除" @cancel="deleteShow = false" @confirm="deleteClick"></delete-model>
	</view>
</template>

<script>
export default {
	data() {
		return {
			caseID: '',		// 帖子的 id
			commentData: {
				page: 1,
				page_size: 10,
				post_id: '',
			},
			// 帖子数据详情对象
			caseData: {},
			// 评论数据列表
			commentDataList: [],
			// 输入框中的value值
			inputValue: '',
			deleteShow: false,
		};
	},
	onLoad(options) {
		this.caseID = options.case_id
		this.commentData.post_id = options.case_id
		this.getData()
	},
	// 下拉刷新
	async onPullDownRefresh() {
		await this.getData()
		this.$u.toast('页面刷新成功')
		uni.stopPullDownRefresh()
	},
	// 上拉加载
	onReachBottom() {
		this.commentData.page += 1
		this.getCaseComment()
	},
	methods: {
		getData() {
			this.getCaseItem()
			this.commentData.page = 1,		// 获取第 1 页的评论数据
			this.commentDataList = []
			this.getCaseComment()
		},
		// 根据帖子 id 获取帖子信息
		async getCaseItem() {
			const res = await this.$u.api.getCaseItem({id: this.caseID})
			this.caseData = res
		},
		// 获取帖子评论信息
		async getCaseComment() {
			const res = await this.$u.api.getCommentList(this.commentData)
			this.commentDataList = [...this.commentDataList, ...res]
		},
		// 底部发送按钮的点击事件
		async submitClick() {
			// 注：this.keyword 已做去除两段空格处理
			if (this.inputValue.length === 0) return this.$u.toast('请先输入内容')
			// TODO:处理后续发送评论逻辑
			const res = await this.$u.api.commentCase({
				post_id: this.caseID,
				comment: this.inputValue
			});
			if(!res) return this.$u.toast('评论失败，请稍后再试')
			this.$u.toast('发表评论成功')
			this.commentData.page = 1
			this.commentDataList = []
			this.getCaseComment()
			// 最后，如果发送成功，则清空输入框
			this.inputValue = ''
		},
		// 帖子的点赞/取消点赞事件
		starClick(id) {
			if(this.caseData.has_star) {
				this.caseData.has_star = false,
				this.caseData.star_num -= 1
			} else {
				this.caseData.has_star = true,
				this.caseData.star_num += 1
			}
		},
		// 确认删除此条帖子的事件处理函数
		async deleteClick() {
			// 调接口发起请求删除此条帖子
			const res = await this.$u.api.delCase({post_id: this.caseID})
			if(!res) return this.$u.toast('删除失败，请稍后再试')
			this.$u.vuex('vuex_caseDeleteID', this.caseID)
			// 帖子删除成功后导航到上一页
			this.$u.toast('删除成功，即将返回上一页')
			setTimeout(() => {
				this.$u.route({
					type: 'back',
				})
			}, 1000)
			this.deleteShow = false		// 关闭 删除模态框
		}
		
	}
};
</script>

<style lang="scss" scoped>
.comment-detail-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: #f4f4f4;
	padding-top: 1rpx;
	padding-bottom: 108rpx;
	.comment-container-box {
		width: 100%;
		margin-top: 20rpx;
		background-color: white;
		padding-bottom: 10rpx;
		.comment-item-box,
		.comment-title-box {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
			padding: 24rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
		}
	}
}
.comment-item-box {
	border-bottom: 1px solid #f4f4f4;
	.user-data {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.user-name-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.name {
				font-size: 30rpx;
				margin-left: 32rpx;
			}
		}
	}
	.time-box {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #97979f;
	}
}
.commont-input-box {
	width: 750rpx;
	height: 108rpx;
	background-color: white;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 23rpx 46rpx 14rpx 70rpx;
	.comment-input {
		width: 630rpx;
		height: 70rpx;
		border-radius: 35rpx;
		background-color: #f4f4f4;
		padding-left: 1em;
		padding-right: 4em;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #97979f;
		position: relative;
	}
	.submit-btn {
		width: 94rpx;
		height: 56rpx;
		position: absolute;
		top: 50%;
		right: 10rpx;
		transform: translateY(-50%);
		background-color: #00c9b1;
		border-radius: 28rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 56rpx;
		text-align: center;
	}
}

</style>

